<template>
	<div class="device-detail">
		<device-detail-20013 :device="device" :client="client" v-if="space === '20013'"></device-detail-20013>
	</div>
</template>

<script type="text/ecmascript-6">

	import Core from 'core/core'
    import deviceDetail20013 from './detail-20013.vue'

	export default {
		components: {
            deviceDetail20013,
        },
		data() {
			return {
				Core: Core,
				id: '',
				deviceId: '',
				space: '',
				device: {},
				client: {}
			}
		},
		mounted: function () {
			this.id = this.$route.query.id;
			this.deviceId = this.$route.query.device_id;
			this.space = this.$route.query.space;
			let clientSpaceList = ["20005", "20006", "20007"];
			this.getDeviceDetail();
			if (clientSpaceList.indexOf(this.space) > -1) {
				this.getClientDetail();
			}
		},
		methods: {
			getDeviceDetail() {
				Core.Api.Device.detail(this.id)
					.then(res => {
						this.device = res.device;
					})
					.catch(err => {
						this.$message.error(err.message);
					});
			},
			getClientDetail() {
				Core.Api.Frame.getClientDetail(this.deviceId, this.space)
					.then(res => {
						this.client = res.device;
					})
					.catch(err => {
                        this.$message.error(err.message);
					});
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
